/**
 *只给限额触警用
 * create 2020-12-09
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Tooltip, Spin } from 'antd';
import { TableC } from '../../../comps';
const { Option } = Select;

class LimitDetailTableC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    isRed: false, //是否需要触警行标红
    search: {}, //查询条件
  };

  constructor(props) {
    super(props);

    this.state = {
      tablesData: [], //表格数组基本数据
      search: {},
      timeStamp: undefined, //时间戳
    };
  }

  componentDidMount() {
    this.setState(
      {
        search: this.props.search,
        timeStamp: this.props.timeStamp,
      },
      () => {
        this.getDetails(); //获取详情数据
      },
    );
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(this.state.timeStamp) != JSON.stringify(nextProps.timeStamp) || JSON.stringify(this.state.search) != JSON.stringify(nextProps.search)) {
      this.setState(
        {
          search: nextProps.search,
          timeStamp: nextProps.timeStamp,
        },
        () => {
          this.getDetails(); //获取详情数据
        },
      );
    }
  }
  //获取详情表格信息
  getDetails = () => {
    const { dispatch, isRed, url } = this.props;
    const { search } = this.state;
    const args =
      url == 'getDetails'
        ? {
            //不同页面请求接口不同 入参不同 监控详情
            ruleId: search.ruleId,
          }
        : url == 'queryReportInfoById'
        ? {
            //报表详情
            ruleId: search.ruleId,
            expirationDate: search.expirationDate,
          }
        : {
            //触警详情
            ruleId: search.ruleId,
            instructionId: search.instructionId,
            tradeUnitId: search.tradeUnitId,
          };
    dispatch({
      type: `limitDetailTableM/${url}`,
      payload: {
        ...args,
      },
      callback: (res) => {
        const data = res.data?.dataSource || [];

        data.forEach((item1) => {
          if (item1.dataSource) {
            item1.dataSource.map((item) => {
              //给触警那行数据加红色背景
              if (isRed && item.portfolio == search.portfolioRootCode + '-' + search.portfolioRootName) {
                item.isRed = true;
              } else {
                item.isRed = false;
              }
              if (item.child) {
                item.child.map((x, key) => {
                  if (isRed && (x.tradingCode == search.tradingCode || x.tradingCode == '现金')) {
                    x.isRed = true;
                  } else {
                    x.isRed = false;
                  }
                  x.key = key;
                  if (x.child) {
                    x.child.map((x0, key0) => {
                      if (isRed && (x0.tradingCode == search.tradingCode || x0.tradingCode == '现金')) {
                        x0.isRed = true;
                        x.isRed = true;
                      } else {
                        x0.isRed = false;
                      }
                      x0.key = key0;
                    });
                  }
                });
              }
            });
          }
        });
        this.setState({
          tablesData: data,
        });
      },
    });
  };
  expandedRowRender = (record) => {
    let tableRowClass = (row) => {
      return row.isRed ? 'redBg' : '';
    };
    record.columns.map((item) => {
      if (item.key == 'numerator' || item.key == 'sumDenominator' || item.key == 'denominator') {
        item.align = 'right';
        item.render = (text, record) => {
          return text !== null ? (text * 1).toFixed(2) : '--';
        };
      }
      if (item.key == 'value') {
        item.align = 'right';
        item.render = (text, record) => {
          if (this.props.search.pecent === false) {
            return text !== null ? text : '--';
          }
          return text !== null ? parseFloat(text * 100).toFixed(2) + '%' : '--';
        };
      }
    });

    if (record.child && record.child.length && record.child[0].columns) {
      return (
        <TableC
          columns={record.columns || []}
          dataSource={record.child || []}
          rowClassName={tableRowClass}
          expandedRowRender={this.expandedRowRender} //递归调用
          rowKey='key'
          hidePage={true}
        />
      );
    } else {
      return <TableC columns={record.columns || []} dataSource={record.child || []} rowClassName={tableRowClass} rowKey='key' hidePage={true} />;
    }
  };

  render() {
    const { tablesData } = this.state;
    const { scrollHeight, loading, url, search } = this.props;
    tablesData &&
      tablesData.forEach((item1) => {
        if (item1.columns.length && !item1.columns[0].width) {
          item1.columns.map((item) => {
            if (scrollHeight) item.width = parseFloat(92 / item1.columns.length) + '%';
            if (item.key != 'portfolio') {
              item.align = 'right';
              item.render = (text, record) => {
                if (search.pecent === false) {
                  return text !== null ? text : '--';
                }
                return text !== null ? parseFloat(text * 100).toFixed(2) + '%' : '--';
              };
            }
          });
        }
        if (item1.dataSource.length && !item1.dataSource[0].key) {
          item1.dataSource.map((item, key) => {
            item.key = key;
          });
        }
      });

    const tableRowClass = (record) => {
      return record.isRed ? 'redBg' : '';
    };
    return (
      <div>
        <Spin spinning={loading.effects[`limitDetailTableM/${url}`] == true}>
          {tablesData &&
            tablesData.map((item, index) => {
              return (
                <div style={{ marginBottom: '40px' }} key={index}>
                  {item.msg ? <div style={{ margin: '10px 0 10px 20px' }}>{item.msg}</div> : ''}
                  <TableC
                    columns={item.columns}
                    dataSource={item.dataSource}
                    expandedRowRender={this.expandedRowRender}
                    defaultExpandAllRows={false}
                    rowClassName={tableRowClass}
                    hidePage={true}
                    scroll={{ y: scrollHeight }}
                    rowKey='key'
                  />
                </div>
              );
            })}
        </Spin>
      </div>
    );
  }
}

// props类型
LimitDetailTableC.propsTypes = {
  isRed: PropTypes.bool, //是否需要触警行标红
  scrollHeight: PropTypes.oneOf([PropTypes.string, PropTypes.number]), // 设置表格滚动高度
  search: PropTypes.object, //当前查询条件
};

export default connect(({ limitDetailTableM, loading }) => ({ limitDetailTableM, loading }))(LimitDetailTableC);
